<template>
  <div>
    <pure-table
      ref="pt"
      :headers="headers"
      :data="tableData"
      @selection-change="(val) => (multipleSelection = val)"
    >
      <!-- 日期列需要自定义模板，使用具名插槽 -->
      <template #date="{ row }">
        {{ row.date }}
      </template>
    </pure-table>

    <div style="margin-top: 20px">
      <el-button @click="toggleSome">切换第二、第三行选中</el-button>
      <el-button @click="$refs.pt.clearSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
import PureTable from "@/components/Abstract/AbstractTableList.vue";

export default {
  components: { PureTable },
  data() {
    return {
      headers: [
        { prop: "date", label: "日期", width: 120, scoped: "date" },
        { prop: "name", label: "姓名", width: 120 },
        { prop: "address", label: "地址", tooltip: true },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "王大狐",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王大狐",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王大狐",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王大狐",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
    };
  },
  methods: {
    toggleSome() {
      const pt = this.$refs.pt;
      pt.toggleRowSelection(this.tableData[1], true);
      pt.toggleRowSelection(this.tableData[2], true);
    },
  },
};
</script>